<template>
  <div class="content">
    <el-card>
      <div class="nav-wrap">
        <div class="title">通知消息</div>
      </div>
      <el-form ref="formRef" :model="dataForm" label-width="120px" class="notify-form">
        <el-form-item label="消息:" prop="messageContents">
          <el-input v-model="dataForm.messageContents" placeholder="请输入消息" maxlength="120" />
        </el-form-item>
        <el-form-item label="开关:" prop="hiddenFlag">
          <el-switch v-model="dataForm.hiddenFlag" active-text="显示" inactive-text="隐藏" active-value="1" inactive-value="0"> </el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateData">确认修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { reqGetNotice, reqUpdateNotice } from '@/api/index';

export default {
  data() {
    return {
      dataForm: {
        messageId: '',
        messageContents: '',
        hiddenFlag: '',
      },
    };
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {
      const res = await reqGetNotice();
      const { messageId, messageContents, hiddenFlag } = res.data.resData;
      console.log('消息>>>', res);
      this.dataForm = {
        messageId,
        messageContents,
        hiddenFlag,
      };
    },
    async updateData() {
      try {
        const res = await reqUpdateNotice(this.dataForm);
        console.log('更新消息>>>', res);
        this.$message.success('更新成功');
      } catch (err) {
        console.log('更新消息失败>>>', err);
        this.$message.error('更新失败');
      }
    },
  },
};
</script>

<style scoped lang="less">
.nav-wrap {
  display: flex;
  align-items: center;
  height: 40px;
  .title {
    padding-left: 18px;
    height: 26px;
    font-size: 19px;
    font-weight: 500;
    color: #3b3c3d;
    line-height: 26px;
    position: relative;
    top: -20px;
    left: -20px;
    &::after {
      content: '';
      position: absolute;
      left: 0;
      width: 6px;
      height: 100%;
      background: #1e87f0;
      border-radius: 3px;
    }
  }
}
.notify-form {
    width: 450px;
}
</style>
